<template>
  <base-breadcrumb>
    <!-- 工种设置 -->
    <div id="base-breadcrumb" style="position: relative; overflow: hidden">
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <a-button class="mb12 mr20" icon="plus" type="primary" @click="handleManage(0)" v-if="hideBuquBtn()">添加行</a-button>
        <!-- <a-button  @click="handleDel" v-if="hideBuquBtn()">删除</a-button> -->

        <!-- 统计汇总 -->
        <AuditSummary ref="auditSummary" title="工种设置" style="margin-bottom: 12px" :countList="countList" />

        <list-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          :alert="true"
        >
          <!-- 编辑 -->
          <span slot="action" slot-scope="text, record" v-if="hideBuquBtn()">
            <a @click="handleManage(1, record)">编辑</a>
          </span>
          <!-- 状态 -->
          <template slot="statusCode" slot-scope="text, record">
            <status-display :statusCode="record.statusCode" :statusMap="statusMap"></status-display>
          </template>
        </list-table>
      </a-card>
      <!-- 表单弹窗 -->
      <dialog-form
        ref="dialogForm"
        :visible.sync="visible"
        editModel="E"
        :api="editModel != 0 ? api : null"
        :form="form"
        headerTitle="工种设置"
        :width="800"
        :rules="rules"
        :formList="formList"
        @confirm="submitForm"
      ></dialog-form>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import DialogForm from '@/components/DialogForm' // 表单弹窗
import { getLabel, addLabel, editLabel, getLabelDetail, delLines } from '@/api/project/projects' // api
import StatusDisplay from '@/components/StatusDisplay'
import AuditSummary from '@/views/quality/components/AuditSummary' // 统计汇总

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 80,
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '工种名称',
    ellipsis: true,
    width: 100,
    dataIndex: 'name'
  },
  {
    title: '状态',
    dataIndex: 'statusCode',
    width: 100,
    scopedSlots: { customRender: 'statusCode' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 180,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    DialogForm,
    StatusDisplay,
    AuditSummary
  },
  data() {
    this.columns = columns
    return {
      statusMap: {
        0: {
          label: '不可用', // 文本
          color: '#FE5500' // 字体色彩
        },
        1: {
          label: '可用',
          color: '#00A854'
        }
      }, // 状态枚举表
      rules: {
        name: [{ required: true, message: '请输入工种名称', trigger: 'change' }],
        statusCode: [{ required: true, message: '请选择可用状态', trigger: 'change' }]
      }, // 校验规则
      formList: [
        {
          type: 'BaseInput',
          span: 12,
          label: '工种名称',
          keyName: 'name'
        },
        {
          type: 'a-select',
          span: 12,
          label: '是否可用',
          keyName: 'statusCode',
          viewName: 'statusName',
          data: [
            {
              value: '0',
              label: '不可用'
            },
            {
              value: '1',
              label: '可用'
            }
          ]
        }
      ], // 表单列表
      visible: false, // 表单弹窗显隐控件
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getLabel({ type: '37', ...parameter }).then((res) => {
          if (res) {
            // 更新汇总总数
            this.$nextTick(() => {
              this.$refs.auditSummary && this.$set(this.$refs.auditSummary.countInfo, 'total', res.totalSize)
            })
            return res
          }
        })
      },
      editModel: 0, // 操作类型：0 新增；1 编辑
      api: { getDetail: getLabelDetail }, // 详情api
      form: {}, // 表单参数
      ids: [],
      selectedRowKeys: [],
      selectedRows: [],
      countList: [
        {
          title: '总数：',
          value: 'total',
          needUnit: true
        },
        {
          key: 'select',
          title: '已选择',
          value: 0
        }
      ] // 汇总列表
    }
  },
  // computed: {
  //   rowSelection() {
  //     return {
  //       selectedRowKeys: this.selectedRowKeys,
  //       selectedRows: this.selectedRows,   // 当前行所有数据
  //       onChange: this.onSelectChange
  //     }
  //   }
  // },
  methods: {
    handleDel() {
      let that = this
      if (that.selectedRows.length == 0) {
        that.$message.error('请先选择删除的行！')
        return
      }
      that.$confirm({
        title: '删除',
        content: '确定删除选中行吗？',
        onOk() {
          delLines({ ids: that.ids }).then((res) => {
            if (res.data == 200 || res.data.code == 200) {
              that.$message.success('删除成功！')
              that.$refs.table.refresh(true)
              that.selectedRows = []
              that.selectedRowKeys = []
            }
          })
        },
        onCancel() {}
      })
    },
    // 批量选中
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows

      let arr = []
      selectedRows.forEach(function (obj, i) {
        arr.push(obj.id)
      })
      this.ids = arr
      this.countList[1].value = selectedRows.length
    },
    /**
     * 操作栏 type:0 新增;1 编辑
     */
    handleManage(type, record) {
      this.editModel = type // 映射操作类型
      this.form = type == 1 ? this.$clone(record) : {} // 配置参数
      this.visible = true // 打开表单
    },
    /**
     * 提交表单
     */
    submitForm(form) {
      let that = this
      let api = [addLabel, editLabel][that.editModel] // 根据操作切换url地址
      // 新增的时候没有type，加上标识;28:安全；29：质量
      !form.type && (form.type = '37') // 提交表单
      that.$refs.dialogForm.loading = true
      api(form)
        .then((res) => {
          that.$refs.dialogForm.loading = false
          that.$message.success(['添加', '编辑'][that.editModel] + '成功！')
          that.visible = false
          that.$refs.table.refresh(true)
        })
        .catch((res) => {
          // that.$message.warning(['添加', '编辑'][that.editModel] + '失败！')
          that.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>
